<template>
  <div class="home-page">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      首页
    </div>
    <div class="home-content">
      <div class="home-bg"></div>
      <div class="home-nav">
        <div class="nav-box">
          <h1 class="mb40">欢迎登陆大闸蟹溯源系统</h1>
          <p class="nav-title">快捷查询</p>
          <div class="box">
            <div @click="goPage('ticketCheck')" class="mr20 txc">
              <div class="nav-circle">
                <i class="el-icon-s-ticket"></i>
              </div>
              <p class="mt10">蟹券查询</p>
            </div>
            <div @click="goPage('ringCheck')" class="mr20 txc">
              <div class="nav-circle">
                <i class="el-icon-s-check"></i>
              </div>
              <p class="mt10">蟹扣查询</p>
            </div>
            <div @click="goPage('listQuery')" class="txc">
              <div class="nav-circle">
                <i class="el-icon-s-order"></i>
              </div>
              <p class="mt10">列表查询</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Home',
  created () {
  },
  methods: {
    goPage (name) {
      this.$router.push({ name })
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  height: 100%;
  position: relative;
}
.home-content {
  width: 100%;
  height: 100%;
  padding: 50px;
  background: #fff;
  display: flex;
  .home-bg {
    background: url('~@/assets/home_svg.svg') no-repeat center;
    background-size: 100%;
    width: 65%;
  }
  .home-nav {
    position: relative;
    width: 35%;
    .nav-title {
      font-size: 16px;
      margin-bottom: 20px;
    }
    .nav-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .box {
      display: flex;

    }
    .nav-circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #ccc;
      background: #1990F9;
      box-shadow: 4px 4px 8px rgba($color: #000000, $alpha: .2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      i {
        font-size: 40px;
      }
    }
  }
}
</style>
